<template>
  <div :class="[$route.meta.home ? '' : 'background-white', 'blog-header']">
    <div :class="[$route.meta.home ? '' : 'background-white', 'header-wrapper']">
      <el-row>
        <el-col :span="6">
          <div class="home-icon"></div>
        </el-col>
        <el-col :span="18">
          <div class="menu-option">
            <ul class="select-list" v-show="!showSearch">
              <li @click="goHome">
                <icon-svg name="home"></icon-svg>
                <span>首页</span>
              </li>
              <li @click="goBlog">
                <icon-svg name="edit"></icon-svg>
                <span>博客</span>
              </li>
              <!-- <li>
              <icon-svg name="about"></icon-svg>
              <span>关于我</span>
            </li> -->
              <li @click="goDemo">
                <icon-svg name="manage"></icon-svg>
                <span>Demo</span>
              </li>

              <li @click="goLogin" v-if="!loginStatus">
                <icon-svg name="login"></icon-svg>
                <span>登录</span>
              </li>
              <li class="login-avatarKey" v-else>
                <div class="user-avatarKey">
                  <img src="~@/assets/img/user.jpg" />
                </div>
                <div class="login-toolbar">
                  <el-card>
                    <div class="user-avatarKey max">
                      <img src="~@/assets/img/user.jpg" />
                    </div>
                    <span class="user-name">不开心就写代码</span>
                    <icon-svg name="vip" class="vip"></icon-svg>
                    <el-divider></el-divider>
                    <ul class="login-toolbar-list">
                      <li @click="goCreateBlog">
                        <icon-svg name="contentManage"></icon-svg>
                        <span>发布博客</span>
                      </li>
                      <li @click="goManage">
                        <icon-svg name="manage"></icon-svg>
                        <span>后台管理</span>
                      </li>
                      <li @click="goPassword">
                        <icon-svg name="revisePassword"></icon-svg>
                        <span>修改密码</span>
                      </li>
                      <li @click="loginOut">
                        <icon-svg name="loginOut"></icon-svg>
                        <span>退出登录</span>
                      </li>
                    </ul>
                  </el-card>
                </div>
              </li>
              <li @click="toggleSearch" v-if="!$route.meta.noSearch">
                <i class="el-icon-search"></i>
                <span>搜索</span>
              </li>
            </ul>
            <div class="select-list" v-if="!$route.meta.noSearch" v-show="showSearch">
              <li>
                <el-input @keydown.native.enter="clickSearch" placeholder="请输入内容" v-model="search">
                  <el-button @click="clickSearch" slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </li>
              <li @click="toggleSearch">
                <!-- <i class="el-icon-search"></i> -->
                <span>隐藏</span>
              </li>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      showSearch: false,
      search: '',
      index: 'home'
    }
  },
  computed: {
    loginStatus() {
      return this.$store.state.user.id ? true : false
    }
  },
  methods: {
    toggleSearch() {
      this.showSearch = !this.showSearch
    },
    clickSearch() {
      this.showSearch = false
      this.$router.push({ name: 'blog-search', query: { value: this.search } })
    },
    goHome() {
      this.$router.push({ name: 'home' })
    },
    goBlog() {
      this.$router.push({ name: 'blog' })
    },
    goDemo() {
      this.$router.push({ name: 'demo' })
    },
    goLogin() {
      this.$parent.$refs.login.showDialog()
    },
    goCreateBlog() {
      this.$router.push({ name: 'blog-create' })
    },
    goManage() {
      this.$router.push({ name: 'manage-edit-content' })
    },
    goPassword() {
      this.$router.push({ name: 'manage-user-password' })
    },
    loginOut() {
      this.$utils.clearLoginInfo()
      if (this.$route.meta.login) {
        this.$router.push({ name: 'home' })
      }
    }
  }
}
</script>

<style lang="scss">
#blog-main {
  .blog-header {
    position: sticky;
    top: 0px;
    z-index: 888;
    &.background-white {
      background: #fff;
      color: #000;
    }
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    .header-wrapper {
      position: relative;
      height: 60px;
      margin: 0 auto;
      width: 1190px;
      &.background-white {
        background: #fff;
        color: #000;
      }
      .menu-option {
        li,
        ul {
          list-style: none;
        }
      }
      .home-icon {
        color: $theme-home-icon;
        font-size: 40px;
        height: 60px;
        margin-left: 20px;
        line-height: 60px;
      }

      .select-list {
        display: flex;
        justify-content: flex-end;
        position: relative;
        // right: -400px;
        // transition: all 1s ease-out;
        & > li {
          cursor: pointer;
          height: 60px;
          line-height: 60px;
          margin: 0 14px;
          font-size: 15px;
          box-sizing: border-box;
          &:hover {
            color: $theme-home-icon;
          }
          &.active {
            border-bottom: 1px solid $theme-home-icon;
            color: $theme-home-icon;
          }
          & > span {
            margin-left: 5px;
          }
        }
        .login-avatarKey {
          position: relative;
          .user-avatarKey {
            margin-top: 10px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            transition: all 0.2s ease-out;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          &:hover {
            .user-avatarKey {
              transform: scale(1.3) translate(0, 10px);
            }
            .login-toolbar {
              display: block;
              .el-card {
                animation: moveup 0.2s ease-out forwards;
              }
            }
          }
          @keyframes moveup {
            from {
              opacity: 0;
            }
            to {
              opacity: 1;
            }
          }
          .el-card {
            overflow: visible;
            opacity: 0;
            position: absolute;
            left: -78px;
            top: 60px;
            width: 200px;
            cursor: auto;
            background: #fff;
            z-index: 889;
            .user-avatarKey {
              position: absolute;
              margin-top: 10px !important;
              top: -47px;
              left: 78px;
            }
          }
          .login-toolbar {
            display: none;
            text-align: center;
            .user-name {
              display: block;
              font-size: 15px;
              height: 20px;
            }
            .vip {
              font-size: 14px;
              margin-top: 30px;
              color: #f9ab0b;
            }
            .el-divider--horizontal {
              margin: 0 0 10px 0;
            }
            .login-toolbar-list {
              & > li {
                cursor: pointer;
                height: 50px;
                line-height: 50px;
                margin: 0 14px;
                font-size: 14px;
                border-bottom: 1px solid #e8e8ed;
                &:hover {
                  color: $theme-home-icon;
                }
                & > span {
                  margin-left: 5px;
                }
              }
            }
            .max {
              transform: scale(1.3);
            }
          }
        }
      }
    }
  }
}
</style>
